<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正式版</title>
    <link rel="stylesheet" href="window.css">
    <style>
        *{
            padding: 0;
            margin: 0 auto;
        }
        .head{
            width: 80rem;
            height: 5rem;
            border: 0.1rem solid black;
            display: flex;
            .nav{
                width: 70%;
                display: flex;
                position: relative;
                .test{
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                .left{
                    width: 60%;
                    height: 100%;
                }
                .right{
                    width: 40%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    .search{
                        width: 56%;
                        height: 40%;
                        padding: 0 2%;
                    }
                    .creator{
                        width: 30%;
                        height: 44%;
                    }
                }
            }
            .person{
                width: 30%;
                height: 100%;
                display: flex;
                align-items: center;
                border-left: 0.1rem solid black;
                .login,.register{
                    width: 30%;
                    height: 60%;
                    border: none;
                    font-size: 1.4rem;
                }
                .login{
                    background-color: darkmagenta;
                    color: white;
                }
                .login:hover,.register:hover{
                    color: black;
                    background-color: rgba(0, 0, 0, 0.2);
                }
                .hello{
                    font-size: 1.5rem;
                }
                img{
                    width: 4rem;
                    height: 4rem;
                    border-radius: 50%;
                }
                .personalCenter,.exit{
                   border: none;
                   height: 60%;
                   cursor: pointer;
                }
            }
        }
        .bar{
            margin-top: 0.5rem;
            width: 80rem;
            height: 2rem;
            border: 0.1rem solid black;
            .newest,.hottest,.top{
                width: 6rem;
                margin: 0 1rem;
            }
        }
        .active{
            display: block;
        }
        .main{
            margin-top: 1rem;
            width: 80rem;
            height: 35rem;
            border: 0.1rem solid black;
            display: flex;
            .left{
                width: 10%;
                height: 100%;
                border: 0.1rem solid black;
                margin-right: 2%;
                .system,.personpage,.good,.comment,.look,.mywork,
                .follower,.fans,.clear{
                    width: 100%;
                    height: 10%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 1.4rem;
                    border-bottom: 0.1rem solid black;
                }
            }
            .center{
                width: 71%;
                height: 100%;
                overflow-y: scroll;
                border: 0.1rem solid blue;
                .newestItem{
                    width: 80%;
                    height: 20%;
                    border: 0.1rem solid black;
                }
                .username,.password,.email,.startworkyear,.profession,
                .company,.position,.introduction{
                    margin-top: 2%;
                    width: 80%;
                    height: 6%;
                    border: 0.1rem solid black;
                    display: flex;
                    align-items: center;
                    span{
                        font-size: 1.3rem;
                    }
                    .a,.a1,.a2,.a3,.a4,.a5,.a6,.a7{
                        width:80%;
                        height: 80%;
                        background-color: rgba(0,0,0,0.2);
                        display: flex;
                        align-items: center;
                        padding-left: 5%;   
                    }
                    .a{
                        margin-left: 3%;
                    }
                    .a1,.a2,.a4,.a5,.a6{
                        margin-left: 6%;
                    }

                    /*控制输入框样式*/
                    .b{
                        width: 80%;
                        height: 80%;
                        padding-left: 5%;
                        padding-right: 5%;
                        margin-left: 2%;
                    }
                }
                .change{
                    margin-top: 3%;
                    width: 20%;
                    height: 8%;
                    margin-left: 40%;
                }
                .lookItem{
                    width: 100%;
                    height: 20%;
                    position: relative;
                    border-bottom: 0.1rem solid black;
                    /* overflow-wrap: break-word;
                    word-break: break-all;
                    white-space: pre-wrap; */
                    img{
                        width: 6rem;
                        height: 6rem;
                        position: absolute;
                        right: 2%;
                        top: 5%;
                    }
                }
                .fansItem,.followerItem{
                    width: 80%;
                    height: 20%;
                    display: flex;
                    border-bottom: 0.1rem solid black;
                    align-items: center;
                    img{
                        width: 6rem;
                        height: 6rem;
                        border-radius: 50%;
                    }
                    span{    
                        font-size: 2rem;
                    }
                }
            }
            .right{
                margin-left: 2%;
                width: 15%;
                height: 100%;
                border: 0.1rem solid yellow;
                display: flex;
                flex-direction: column;
                img{
                    width: 7rem;
                    height: 7rem;
                    border-radius: 50%;
                    margin-top: 8%;
                }
                .submitavatar{
                    margin-top: 10%;
                    width: 60%;
                    height: 6%;
                }
                .currentPage{
                    margin-top: 2%;
                    width: 80%;
                    margin-left: 10%;
                }
            }
        }
    </style>
</head>
<body>
    <div class="head">
        <div class="nav">
            <div class="left">

            </div>
            <div class="right">
                <input type="text" class="search" placeholder="请输入内容">
                <button class="creator">创作者中心</button>
            </div>
        </div>
        <div class="person">
            <button class="login">登录</button>
            <button class="register">注册</button>
        </div>
    </div>
    <div class="bar">
        <button class="newest">最新</button>
        <button class="hottest">最热</button>
        <button class="top">Top文章</button>
    </div>
    <div class="window"></div>
    <div class="main">
        <div class="left">

        </div>
        <div class="center">
            <div class="newestItem">
                <h1 class="title">这是文章标题</h1>
                <p class="summary">总结</p>
                <span class="content">文章内容</span>
                <span class="viewCount">浏览量:</span>
                <span class="createTime">创作时间:</span>
                <span class="likeCount">点赞数</span>
                <span class="createTime">发表时间</span>
                <span class="updateTime">更新时间</span>
                <img src="" alt="文章图片" class="coverUrl">
                <span class="labelId">文章类型</span>
                <span class="collectCount">收藏数</span>
                <span class="isdelete">删除</span>
                <button>点赞</button>
                <button>收藏</button>
                <button>关注</button>
                <span>作者</span>
            </div>
        </div>
        <div class="right">           
        
        </div>
    </div>
</body>
</html>
<script src="LoginPage.js"></script>
<script>

    //刚开始的时候就得用获取文章列表渲染基本的文章类型


    //先搜索才能知道有什么人，无敌了
    //全局变量IsLogin发生变化,说明用全局变量控制可行
    //能自动检测登录变化的,而且没有在上文的登录注册页面的点击范围
    //点击事件能检测，但是别的就不行了
    const userdata={
        userId: 0,
        username: "string",
        password: "string",
        email: "string",
        mobile: "string",
        startWorkYear: 0,
        profession: "string",
        introduction: "string",
        company: "string",
        position: "string",
        interests: "string",
        avatar: "string"
    }
    const fansArray=[]//粉丝数组添加已成功
    const followerArray=[]//关注者数组添加已成功
    const hottestArray=[]//最热文章数组
    const newestArray=[]//最新文章数组
    const creatorArray=[]//创作者数组
    const person=document.querySelector('.head .person')
    const center=document.querySelector('.main .center')
    const right=document.querySelector('.main .right')
    const left=document.querySelector('.main .left')



    //渲染个人中心
    function personalCenter(){
        center.innerHTML=`
                <h1>个人中心</h1>
                <div class="username">
                    <span>用户名:</span>
                    <div class="a">${userdata.username}</div>
                </div>
                <div class="password">
                    <span>密码:</span>
                    <div class="a1">${userdata.password}</div>
                </div>
                <div class="email">
                    <span>邮箱:</span>
                    <div class="a2">${userdata.email}</div>
                </div>
                <div class="startworkyear">
                    <span>开始工作:</span>
                    <div class="a3">${userdata.startWorkYear}</div>
                </div>
                <div class="profession">
                    <span>职业:</span>
                    <div class="a4">${userdata.profession}</div>
                </div>
                <div class="company">
                    <span>公司:</span>
                    <div class="a5">${userdata.company}</div>
                </div>
                <div class="position">
                    <span>方向:</span>
                    <div class="a6">${userdata.position}</div>
                </div>
                <div class="introduction">
                    <span>个人介绍:</span>
                    <div class="a7">${userdata.introduction}</div>
                </div>
                <button class="change">保存更改</button>
                `
        right.innerHTML=`
            <img src="${userdata.avatar}" alt="" id="avatar">
            <button class="submitavatar">上传头像</button>
        `
        left.innerHTML=`
            <div class="system">系统通知</div>
            <div class="personpage">个人主页</div>
            <div class="comment">评论列表</div>
            <div class="good">赞/收藏列表</div>
            <div class="mywork">我的文章</div>
            <div class="look">浏览记录</div>
            <div class="clear">清除浏览</div>
            <div class="follower">我的关注</div>
            <div class="fans">我的粉丝</div>
        `
    }
    
    //获取值并修改函数
    function update(event,type){
        const a=event.target
        const originname=userdata[type]
        const input1=document.createElement('input')
        input1.classList.add('b')
        input1.type='text'
        input1.value=originname    
        a.innerHTML=''
        a.appendChild(input1)
        input1.focus()
        input1.addEventListener('blur',function(){
            if(input1.value.trim()!==''){
                a.innerHTML=input1.value
                userdata[type]=input1.value
            }
            else{
                a.innerHTML=originname
            }
            input1.remove()
        })
    }
    

    //粉丝渲染函数(已完成)
    function fans(currentPage,key){
        let xhr=new XMLHttpRequest()
                            xhr.open(
                                'GET',
                                `http://43.136.111.27:8086/user/following?current=${currentPage}&&size=10`
                            )
                            xhr.setRequestHeader('Authorization',`${key}`)
                            xhr.send()
                            xhr.onreadystatechange=function(){
                            if(xhr.status===200&&xhr.readyState===4){
                                let response=JSON.parse(xhr.responseText)
                                console.log(response.data.records)
                                let records=response.data.records
                                if(records.length!=0){
                                    center.innerHTML=""
                                    let i=1
                                    records.forEach(item => {
                                    const fandata={}
                                    for (const key in item){
                                        fandata[key]=item[key]
                                    }
                                    const isexist=creatorArray.some(
                                        existing=>existing.userId===fandata.userId
                                    )
                                    if(!isexist){
                                        fansArray.push(fandata)
                                        const fansItem=document.createElement('div')
                                        fansItem.classList.add('fansItem')
                                        fansItem.innerHTML=`
                                            <h1>${i}</h1>
                                            <img src="${item.avatar}" alt="">
                                            <p>${item.username}</p>
                                        `
                                        center.appendChild(fansItem)
                                        i++
                                    }
                                    
                                    
                                })
                                }
                                else{
                                    center.innerHTML=`<p>当前没有任何粉丝记录</p>`
                                }
                            }
                            }
    }
    
    //关注者渲染函数(已完成)
    function follower(currentPage,key){
        let xhr=new XMLHttpRequest()
        xhr.open(
            'GET',
            `http://43.136.111.27:8086/user/follower?current=${currentPage}&&size=10`
        )
        xhr.setRequestHeader('Authorization',`${key}`)
        xhr.send()
        xhr.onreadystatechange=function(){
        if(xhr.status===200&&xhr.readyState===4){
            let response=JSON.parse(xhr.responseText)
            console.log(response.data.records)
            let records=response.data.records
            if(records.length!=0){
                center.innerHTML=""
                let i=1
                records.forEach(item => {
                    const followerdata={}
                    for (const key in item){
                        followerdata[key]=item[key]
                    }
                    const isexist=followerArray.some(
                        existing=>existing.userId===followerdata.userId
                    )
                    if(!isexist){
                        followerArray.push(followerdata)
                        const followerItem=document.createElement('div')
                        followerItem.classList.add('followerItem')
                        followerItem.innerHTML=`
                            <span>${i}</span>
                            <img src="${item.avatar}" alt="">
                            <span>${item.username}</span>
                        `
                        center.appendChild(followerItem)
                        i++
                    }
            })
            }
            else{
                center.innerHTML=`<p>当前没有任何关注记录</p>`
            }
        }
                    
        }
    }
    
    
    
    
    
    console.log("当前的关注列表为:",followerArray)
     
    //点击最新按钮获取最新文章
    //点击文章这次就真的要给文章id了
    //获取到id后还得要获取他的评论内容
    //就在请求文章类型成功后获取他的评论内容，不过展示大体部分的话就没必要渲染评论了，
    //等到点击了该文章后再发送请求也不迟
    const newest=document.querySelector('.bar .newest')
    newest.addEventListener('click',function(){
        if(Islogin==1){
            // newestArray.forEach(item=>{
            //     center.innerHTML=`${item.title}`
            // })
            alert('已登录')
        }
        else{
            alert('请登录')
        }
    })


    //发送事件就可以，无敌了(这是登录成功的事件，只有登录成功后才能点赞评论)
    document.addEventListener(LoginSuccess,function(event){        
        let key=event.detail
        console.log("用户钥匙为:",key)
        let xhr=new XMLHttpRequest()
        xhr.open(
            'GET',
            "http://43.136.111.27:8086/user/get/userinfo"
        )
        xhr.setRequestHeader('Authorization', `${key}`)
        xhr.send()
        xhr.onreadystatechange=function(){
            if(xhr.status===200&&xhr.readyState===4){
                let response=JSON.parse(xhr.responseText)
                //循环赋值
                for(const key in response.data){
                    if(userdata.hasOwnProperty(key)){
                        userdata[key]=response.data[key]
                    }
                }
                let name=response.data.username
                if(name.length>4)
                name=name.substring(0,4)+"..."
                person.innerHTML=`
                    <img src="${userdata.avatar}" alt="" id="avatar2">
                    <span class="hello">${name}</span>
                    <button class="personalCenter">个人中心</button>
                    <button class="exit">退出登录</button>
                `    
            }
        }
        //在请求外也成功获取了userdata的值
        console.log(userdata)

        //无敌了，登录不成功无法触发搜索功能
        // 获取输入框
        const searchInput = document.querySelector('.head .nav .right .search');

        // 监听输入事件
        //我不搜索我都不知道有谁存在，无敌了
        //干完搜索再渲染搞个上传文章和评论就完成了
        //要不要再搜索完之后在中间展示搜索结果呢?
        let timer
        searchInput.addEventListener('input', function() {
           clearTimeout(timer)
            timer=setTimeout(()=>{
                const keyword=this.value
                let xhr=new XMLHttpRequest()
                xhr.open(
                    'GET',
                    `http://43.136.111.27:8086/search/article/creators?keyword=${keyword}`
                )
                xhr.setRequestHeader('Authorization',`${key}`)
                xhr.send()
                xhr.onreadystatechange=function(){
                    if(xhr.status===200&&xhr.readyState===4){
                       let response=JSON.parse(xhr.responseText)
                       console.log("当前的创作者搜索结果是:",response.data)
                       
                       response.data.forEach(item=>{
                        //每次循环都创建一个新对象
                        const creator={}
                        for (const key in item){
                            creator[key]=item[key]
                        }
                        const isexist=creatorArray.some(
                            existing=>existing.userId===creator.userId
                        )
                        if(!isexist){
                            creatorArray.push(creator)
                        }
                        
                       })
                    }
                }
                console.log("现在的创造者列表为:",creatorArray)
                let xhr2=new XMLHttpRequest()
                xhr2.open(
                    'GET',
                    `http://43.136.111.27:8086/search/article/hottest?keyword=${keyword}`
                )
                xhr2.setRequestHeader('Authorization',`${key}`)
                xhr2.send()

                xhr2.onreadystatechange=function(){
                    if(xhr2.status===200&&xhr2.readyState===4){
                        let response=JSON.parse(xhr2.responseText)
                        console.log("当前的最火文章搜索结果是:",response.data)
                        
                        response.data.forEach(item=>{
                            const hot={}
                            for (const key in item){
                                hot[key]=item[key]
                            }
                            const isexist=hottestArray.some(
                                existing=>existing.articleId===hot.articleId
                            )
                            if(!isexist)
                            hottestArray.push(hot)
                       })
                    }
                }

                console.log("现在最火的文章是:",hottestArray)
                let xhr3=new XMLHttpRequest()
                xhr3.open(
                    'GET',
                    `http://43.136.111.27:8086/search/article/newest?keyword=${keyword}`
                )
                xhr3.setRequestHeader('Authorization',`${key}`)
                xhr3.send()
                xhr3.onreadystatechange=function(){
                    if(xhr3.status===200&&xhr3.readyState===4){
                        let response=JSON.parse(xhr3.responseText)
                        console.log("当前的最新文章搜索结果是:",response.data)
                        
                        response.data.forEach(item=>{
                        const newest={}
                        for (const key in item){
                            newest[key]=item[key]
                        }
                        const isexist=newestArray.some(
                            existing=>existing.articleId===newest.articleId
                        )
                        if(!isexist)
                        newestArray.push(newest)
                       })
                    }
                }
                console.log("当前的最新文章为:",newestArray)
            },500)   
        });

       
        //点击最热按钮获取最热文章

        //点击top按钮获取top文章

        //点击创作者中心就获取当前的创作者列表
        //nav那里变为:创作者 创作文章

        document.addEventListener('click',function(event){

            //搞个退出登录功能(有点莫名奇妙，啥参数都没有)
            if(event.target.classList.contains('exit')&&event.target.closest('.head .person')){
                Islogin=0
                person.innerHTML=`
                    <button class="login">登录</button>
                    <button class="register">注册</button>
                `
                center.innerHTML=""
                left.innerHTML=""
                right.innerHTML=""
            }

            if(event.target.classList.contains('personalCenter')&&event.target.closest('.head .person')){
               personalCenter()
            }
            //获取用户的用户名
            if(event.target.classList.contains('a')&&event.target.closest('.main .center .username')){
                update(event,'username')
            }
            //获取用户的密码
            if(event.target.classList.contains('a1')&&event.target.closest('.main .center .password')){
                update(event,'password')
            }
            //获取用户的邮箱
            if(event.target.classList.contains('a2')&&event.target.closest('.main .center .email')){
                update(event,'email')
            }
            //获取用户的工作时间
            if(event.target.classList.contains('a3')&&event.target.closest('.main .center .startworkyear')){
                update(event,'startWorkYear')
            }
            //获取用户职业并修改
            if(event.target.classList.contains('a4')&&event.target.closest('.main .center .profession')){
                update(event,'profession')
            }
            //获取用户公司并修改
            if(event.target.classList.contains('a5')&&event.target.closest('.main .center .company')){
                update(event,'company')
            }
            //获取用户方向并修改
            if(event.target.classList.contains('a6')&&event.target.closest('.main .center .position')){
                update(event,'position')
            }
            //获取用户个人介绍并修改
            if(event.target.classList.contains('a7')&&event.target.closest('.main .center .introduction')){
                update(event,'introduction')
            }
            //获取个人头像的字符串并且修改(服务器问题，只能上传网址，还是要jpg格式才行,无敌了)
            if(event.target.classList.contains('submitavatar')&&event.target.closest('.main .right')){
                // const fileInput=document.createElement('input')
                // fileInput.type='file'//输入框格式为文件上传类型
                // fileInput.accept='image/*'//接受图片类型
                // fileInput.style.display='none'//隐藏输入框
                // right.appendChild(fileInput)
                // fileInput.addEventListener('change',function(e1){
                //     const file=e1.target.files[0]
                //     if(file){
                //         const reader=new FileReader()
                //         reader.onload=function(event){
                //             //更新图片src(只能用输入浏览器网址来做)
                //             document.getElementById('avatar').src=event.target.result
                //             const binaryString=event.target.result
                //             userdata.avatar=binaryString
                //         }
                //         reader.readAsDataURL(file)
                //     }
                //     fileInput.remove()
                // })
                // fileInput.click()
                const fileInput=document.createElement('input')
                fileInput.type='text'
                fileInput.value=""
                right.appendChild(fileInput)
                fileInput.focus()
                fileInput.addEventListener('blur',function(){
                    if(fileInput.value.trim()!==''){
                        const currentInput=fileInput.value
                        console.log("当前输入的网址为:",currentInput)
                        userdata.avatar=fileInput.value
                        const avatar=document.getElementById('avatar')
                        const avatar2=document.getElementById('avatar2')
                        avatar.src=userdata.avatar
                        avatar2.src=userdata.avatar
                    }
                    fileInput.remove()
                })
                console.log("上传图片后的用户数据为:",userdata)
            }
        
            //提交个人数据
            //这里是提交修改个人数据的(已完成)
            if(event.target.classList.contains('change')&&event.target.closest('.main .center')){
                console.log("这是提交时的userdata:",userdata)
                let xhr=new XMLHttpRequest()
                xhr.open(
                    'POST',
                    'http://43.136.111.27:8086/user/refresh/info'
                )
                xhr.setRequestHeader('Authorization',`${key}`)
                xhr.setRequestHeader('Content-Type','application/json')
                xhr.send(JSON.stringify(userdata))
                console.log("这是json后的userdata",JSON.stringify(userdata))
                xhr.onreadystatechange=function(){
                    if(xhr.status===200&&xhr.readyState===4){
                        let response=JSON.parse(xhr.responseText)
                        console.log(response)
                        let name=userdata.username
                        if(name.length>4)
                        name=name.substring(0,4)+"..."
                        person.innerHTML=`
                            <img src="${userdata.avatar}" alt="" id="avatar2">
                            <span class="hello">${name}</span>
                            <button class="personalCenter">个人中心</button>
                            <button class="exit">退出登录</button>
                        `
                    }
                }
            }
            
            //点击系统中心(渲染系统通知数据)(要对data用循环渲染)
            if(event.target.classList.contains('system')&&event.target.closest('.main .left')){
                let xhr=new XMLHttpRequest()
                xhr.open(
                    'GET',
                    'http://43.136.111.27:8086/user/notifications'
                )
                xhr.setRequestHeader('Authorization', `${key}`)
                xhr.send()
                xhr.onreadystatechange=function(){
                    if(xhr.status===200&&xhr.readyState===4){
                        let response=JSON.parse(xhr.responseText)
                        console.log(response.data)
                        let data=response.data
                        if(data.length==0){
                            center.innerHTML=`
                                当前系统通知为空
                            `
                        }
                        else{
                            //不急，因为还没有系统通知
                            // data.forEach(item=>{

                            // })
                            console.log(data)
                        }
                    }  
                }
            }
        
            //点击个人主页渲染值
            if(event.target.classList.contains('personpage')&&event.target.closest('.main .left')){
                personalCenter()
            }
            //查看别人信息还需要creatorId,但是你想查看粉丝信息的时候又不会给你
            //要不要创建粉丝数组?以后可能要用，因为还有一个创作者中心
            //渲染我的粉丝
            //先搜索，你才能知道有哪些人，无敌了
            //还要分页查询，为什么不把数据全给我呢
            //那还是创建粉丝数组好了，可能还要获取他的全部信息什么的(粉丝那里也差不多)
            if(event.target.classList.contains('fans')&&event.target.closest('.main .left')){
                //渲染右边的输入页数先
                center.innerHTML=``
                right.innerHTML=`
                    <p>请输入查询的页数</p>
                    <input type="text" class="currentPage">
                `
                // 获取输入框并监听输入事件
                const currentPageInput = document.querySelector('.currentPage');
                //防抖技术实现
                let debounceTimer
                currentPageInput.addEventListener('input', (event) => {
                        //检测到有输入行为，马上清除定时器
                        clearTimeout(debounceTimer)
                        //重新设置定时器
                        debounceTimer=setTimeout(()=>{
                            const currentPage = event.target.value;
                            console.log("当前的页数为:",currentPage)
                            fans(currentPage,key)
                        },500)    
                    }
                )
                
                
            }
            //渲染我的追随者(已完成，但是这里的追随者接口又不发送创作者id什么的,无敌了)
            if(event.target.classList.contains('follower')&&event.target.closest('.main .left')){
                //渲染右边的输入页数先
                center.innerHTML=``
                right.innerHTML=`
                    <p>请输入查询的页数</p>
                    <input type="text" class="currentPage">
                `
                // 获取输入框并监听输入事件
                const currentPageInput = document.querySelector('.currentPage');
                //防抖技术实现
                let debounceTimer
                currentPageInput.addEventListener('input', (event) => {
                    //检测到有输入行为，马上清除定时器
                    clearTimeout(debounceTimer)
                    //重新设置定时器
                    debounceTimer=setTimeout(()=>{
                        const currentPage = event.target.value;
                        console.log("当前的页数为:",currentPage)
                        follower(currentPage,key)
                    },500)
                })
                
            }
            console.log("关注列表为:",followerArray)
            console.log("粉丝列表为:",fansArray)
            //渲染评论信息
            if(event.target.classList.contains('comment')&&event.target.closest('.main .left')){
                alert('评论被点击')

            }
            //渲染点赞信息和收藏信息
            if(event.target.classList.contains('good')&&event.target.closest('.main .left')){
                alert('点赞被点击')
            }
            //渲染我的文章
            if(event.target.classList.contains('mywork')&&event.target.closest('.main .left')){
                alert('我的作品被点击')
            }
            //渲染我的浏览记录
            if(event.target.classList.contains('look')&&event.target.closest('.main .left')){
                right.innerHTML=""
                let xhr=new XMLHttpRequest()
                xhr.open(
                    'GET',
                    'http://43.136.111.27:8086/user/get/browsed-articles?current=1&&size=10'
                )
                xhr.setRequestHeader('Authorization',`${key}`)
                xhr.send()
                xhr.onreadystatechange=function(){
                    if(xhr.status===200&&xhr.readyState===4){
                        let response=JSON.parse(xhr.responseText)
                        console.log(response.data.records)
                        let records=response.data.records
                        if(records.length!=0){
                            center.innerHTML=""
                            records.forEach(item => {
                            const lookItem=document.createElement('div')
                            lookItem.classList.add('lookItem')
                            //本来想赋予id的，但是好像没啥用
                            lookItem.innerHTML=`
                                <h1>${item.title}</h1>
                                <p>${item.summary}</p>
                                <img src="${item.coverUrl}" alt="">
                            `
                            center.appendChild(lookItem)
                        })
                        }
                        else{
                            center.innerHTML=`<p>当前没有任何浏览记录</p>`

                        }
                        
                    }
                }
            }
        
            //清除浏览记录(发送就行，无需渲染)
            if(event.target.classList.contains('clear')&&event.target.closest('.main .left')){
                alert('清除浏览被点击')
                let xhr=new XMLHttpRequest()
                xhr.open(
                    'GET',
                    'http://43.136.111.27:8086/user/clear/myrecord'
                )
                xhr.setRequestHeader('Authorization',`${key}`)
                xhr.send()
                xhr.onreadystatechange=function(){
                    if(xhr.status===200&&xhr.readyState===4){
                        let response=JSON.parse(xhr.responseText)
                        console.log(response)
                    }
                }
            }
        
        
        
        })
    })
    
</script>